;(function(){
    const template=`
    <!--详情-->
    <div class="jumbotron">
        <h1>ID:{{id}}</h1>
        <h2>{{sport.title}}</h2>
        <p>{{sport.content}}</p>
    </div>`
    window.SportDetail={
        template:template,
        data() { //data只会初始化一次，后面点击后不会重新赋值
            return {
                id:this.$route.params.id,
                sport:{},
            }
        },
        created() {
            this.getSprotById();
        },
        methods: {
            //获取某个具体的数据
            getSprotById(){
                //获取路由中的id值(-0是为了将字符串转为整型)
                this.id=this.$route.params.id-0;
                //先获取整个数据
                axios.get("http://127.0.0.1:5500/vue-08-router/02-bootstrap-vue-router/sport.json")
                .then((res)=>{
                    const sportArr=res.data;
                    //根据id查找某个具体的数据
                    this.sport=sportArr.find((detail)=>{
                        return detail.id===this.id;
                    })
                    console.log(this.sport);
                })
            }
        },
        watch:{ //watch是对象 用于监听属性使用
            //监听路由的变化
            "$route"(){
               this.getSprotById();
            }
        }
    }
})()